.svg {
  color: red;
}
@keyframes circle {
  from {
    stroke-dasharray: 0 283; /*svgz中的线段间隔*/
  }
  to {
    stroke-dasharray: 283 283;
  }
}
.SVG_circle {
  animation: circle 5s linear infinite;
}
.logo {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  transition: stroke-dashoffset 0.5s ease-out;
}
.logoBox {
  &:hover {
    .logo {
      stroke-dashoffset: 0;
    }
  }
}

.animateBox {
  overflow: hidden;
  margin-left: 200px;
  position: relative;
  height: 546px;
  width: 422px;
  .cui {
    position: absolute;
    animation: cuianimate 12s infinite;
  }
  .diaosheng2 {
    position: absolute;
    top: 90px;
    width: 3px;
    animation: diaosheng2animate 12s infinite;
  }
  .dimianchang {
    height: 8px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .dimian {
    position: absolute;
    width: 30px;
    top: 50%;
    left: 185px;
    transform: translate(0, -50%);
    animation: dimianAnimate 12s infinite;
  }
  .diaoche2 {
    position: absolute;
    animation: diaoche2Animate 12s infinite;
  }
  .kong {
    position: absolute;
    top: 277px;
    left: 180px;
    width: 38px;
    animation: kongAnimate 12s infinite;
  }
  .diaoche1 {
    position: absolute;
    animation: diaoche1Animate 12s infinite;
  }
  .diaosheng1 {
    position: absolute;
    width: 3px;
    top: 106px;
    animation: diaosheng1animate 12s infinite;
  }
  .diaogou {
    position: absolute;
    animation: diaogouAnimate 12s infinite;
  }
  .gangjinlong {
    width: 24px;
    height: 119px;
    position: absolute;
    animation: gangjinlongAnimate 12s infinite;
  }
  .gangguan {
    position: absolute;
    width: 20px;
    height: 127px;
    animation: gangguanAnimate 12s infinite;
  }
  .diaogousheng {
    position: absolute;
    animation: diaogoushengAnimate 12s infinite;
  }
  .loudou {
    position: absolute;
    animation: loudouAnimate 12s infinite;
  }
  .shuini {
    bottom: 152px;
    left: 185px;
    width: 28px;
    position: absolute;
    animation: shuiniAnimate 12s infinite;
  }
  .shuiniche {
    top: 176px;
    position: absolute;
    animation: shuinicheAnimate 12s infinite;
  }
}

@keyframes cuianimate {
  0% {
    left: -18px;
  }
  10% {
    left: 190px;
    top: 178px;
  }
  12% {
    left: 190px;
    top: 300px;
  }
  14% {
    left: 190px;
    top: 178px;
  }
  16% {
    left: 190px;
    top: 330px;
  }
  18% {
    left: 190px;
    top: 178px;
  }
  20% {
    left: 190px;
    top: 380px;
  }
  22% {
    left: 190px;
    top: 178px;
  }
  30% {
    left: -26px;
    top: 178px;
  }
  100% {
    left: -26px;
    top: 178px;
  }
}

@keyframes diaosheng2animate {
  0% {
    left: -18px;
    height: 89px;
  }
  10% {
    left: 198px;
    height: 89px;
  }
  12% {
    left: 198px;
    height: 211px;
  }
  14% {
    left: 198px;
    height: 89px;
  }
  16% {
    left: 198px;
    height: 241px;
  }
  18% {
    left: 198px;
    height: 89px;
  }
  20% {
    left: 198px;
    height: 291px;
  }
  22% {
    left: 198px;
    height: 89px;
  }
  30% {
    left: -18px;
    top: 90px;
    height: 89px;
  }
  100% {
    left: -18px;
    top: 90px;
    height: 89px;
  }
}

@keyframes dimianAnimate {
  0% {
    height: 8px;
  }
  11% {
    height: 8px;
  }
  12% {
    height: 0;
  }
  100% {
    height: 0;
  }
}

@keyframes diaoche2Animate {
  0% {
    left: -190px;
    top: 75px;
  }
  10% {
    left: 26px;
    top: 75px;
  }
  22% {
    left: 26px;
    top: 75px;
  }
  30% {
    left: -190px;
    top: 75px;
  }
  100% {
    left: -190px;
    top: 75px;
  }
}

@keyframes kongAnimate {
  0% {
    height: 0px;
  }
  10% {
    height: 0px;
  }
  12% {
    height: 40px;
  }
  14% {
    height: 40px;
  }
  16% {
    height: 70px;
  }
  18% {
    height: 70px;
  }
  20% {
    height: 120px;
  }
  100% {
    height: 120px;
  }
}

@keyframes diaoche1Animate {
  0% {
    left: -166px;
    top: 90px;
  }
  30% {
    left: -166px;
    top: 90px;
  }
  40% {
    left: 43px;
    top: 90px;
  }
  50% {
    left: 43px;
    top: 90px;
  }
  60% {
    left: -166px;
    top: 90px;
  }
  65% {
    left: 43px;
    top: 90px;
  }
  75% {
    left: 43px;
    top: 90px;
  }
  80% {
    left: -166px;
    top: 90px;
  }
  85% {
    left: 43px;
    top: 90px;
  }
  100% {
    left: 43px;
    top: 90px;
  }
}

@keyframes diaosheng1animate {
  0% {
    left: -12px;
    height: 30px;
  }
  30% {
    left: -12px;
    height: 30px;
  }
  40% {
    left: 198px;
    height: 30px;
  }
  45% {
    left: 198px;
    height: 163px;
  }
  50% {
    left: 198px;
    height: 30px;
  }
  60% {
    left: -12px;
    height: 30px;
  }
  65% {
    left: 198px;
    height: 30px;
  }
  70% {
    left: 198px;
    height: 163px;
  }
  75% {
    left: 198px;
    height: 30px;
  }
  80% {
    left: -12px;
    height: 30px;
  }
  85% {
    left: 198px;
    height: 30px;
  }
  90% {
    left: 198px;
    height: 93px;
  }
  100% {
    left: 198px;
    height: 93px;
  }
}

@keyframes diaogouAnimate {
  0% {
    top: 116px;
    left: -19px;
  }
  30% {
    top: 116px;
    left: -19px;
  }
  40% {
    left: 191px;
    top: 116px;
  }
  45% {
    left: 191px;
    top: 256px;
  }
  50% {
    left: 191px;
    top: 116px;
  }
  60% {
    top: 116px;
    left: -19px;
  }
  65% {
    left: 191px;
    top: 116px;
  }
  70% {
    left: 191px;
    top: 256px;
  }
  75% {
    left: 191px;
    top: 116px;
  }
  80% {
    top: 116px;
    left: -19px;
  }
  85% {
    left: 191px;
    top: 116px;
  }
  90% {
    left: 191px;
    top: 169px;
  }
  100% {
    left: 191px;
    top: 169px;
  }
}

@keyframes gangjinlongAnimate {
  0% {
    top: 126px;
    left: -25px;
  }
  30% {
    top: 126px;
    left: -25px;
  }
  40% {
    left: 187px;
    top: 126px;
  }
  45% {
    left: 187px;
    top: 278px;
  }
  50% {
    left: 187px;
    top: 278px;
  }
  60% {
    left: 187px;
    top: 278px;
  }
  100% {
    left: 187px;
    top: 278px;
  }
}

@keyframes gangguanAnimate {
  0% {
    top: 136px;
    left: -22px;
  }
  60% {
    top: 136px;
    left: -22px;
  }
  65% {
    left: 189px;
    top: 136px;
  }
  70% {
    left: 189px;
    top: 270px;
  }
  80% {
    left: 189px;
    top: 270px;
  }
  100% {
    left: 189px;
    top: 270px;
  }
}

@keyframes diaogoushengAnimate {
  0% {
    top: 150px;
    left: -150px;
  }
  79% {
    top: 150px;
    left: -150px;
  }
  80% {
    top: 150px;
    left: -54px;
  }
  85% {
    top: 150px;
    left: 155px;
  }
  90% {
    top: 203px;
    left: 155px;
  }
  100% {
    top: 203px;
    left: 155px;
  }
}

@keyframes loudouAnimate {
  0% {
    top: 180px;
    left: -150px;
  }
  79% {
    top: 180px;
    left: -150px;
  }
  80% {
    top: 180px;
    left: -54px;
  }
  85% {
    top: 180px;
    left: 155px;
  }
  90% {
    top: 233px;
    left: 155px;
  }
  100% {
    top: 233px;
    left: 155px;
  }
}

@keyframes shuiniAnimate {
  0% {
    height: 0;
  }
  95% {
    height: 0;
  }
  100% {
    height: 125px;
  }
}

@keyframes shuinicheAnimate {
  0% {
    right: -170px
  }
  90% {
    right: -170px
  }
  95% {
    right: 20px
  }
  100% {
    right: 20px
  }
}
